<template>
	<view>
		<view class="listBox">
			<view class="yhqitem" v-for="(item,index) in list" :key="index" :class="{'fitem': active == index}" @click="lingquyhq(item,index)">
				<view class="jiage">
					<text class="le">FCFA</text>
					<text class="ri">{{ Number(item.coupon_price) }}</text>
				</view>
				<view class="right">
					优惠券
				</view>
				<view class="msg">
					满{{Number(item.use_min_price)}}减{{Number(item.coupon_price)}}元
					<!-- {{item.val}} -->
				</view>

			</view>
		</view>
		<view class="btn lingqu" :class="{'lqactive' : lqactive}" @click="lingquFun">
			立即领取
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lingqu: false,
				list: [],
				info: null,
				active: null,
				lqactive: false,
				acitem: null
			};
		},
		onLoad() {
			uni.getStorage({
				key: 'userinfo',
				success: (res) => {
					this.info = res.data
					this.getyouhuiquan()
				}
			})
		},
		methods: {
			getyouhuiquan() {
				uni.request({
					url: this.$AJAX_URL + 'coupon/coupon_list',
					method: 'POST',
					success: (res) => {
						console.log(res);
						this.list = res.data.data.list
					}
				})
			},
			lingquyhq(item, index) {
				this.active = index;
				this.acitem = item;
				this.lqactive = true;

			},
			lingquFun() {
				if (this.lqactive) {
					uni.request({
						url: this.$AJAX_URL + 'coupon/add_coupon',
						method: 'POST',
						data: {
							uid: this.info.uid,
							coupon_id: this.acitem.id
						},
						success: (res) => {
							this.$u.toast(res.data.msg)
						},
						fail: () => {
							this.$u.toast('领取失败')
						}
					})
				}

			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.listBox {
		padding: 20rpx 23rpx 23rpx;
		margin-bottom: 100rpx;

		.yhqitem {
			height: 134rpx;
			background: url(../../static/fel/yhqf.png);
			background-size: cover;
			position: relative;
			color: #FFFFFF;

			.jiage {
				position: absolute;
				left: 35rpx;
				top: 0;
				bottom: 0;
				margin: auto;
				line-height: 134rpx;

				.le {
					font-size: 30rpx;
				}

				.ri {
					font-size: 72rpx;
				}
			}

			.msg {
				font-size: 24rpx;
				text-align: center;
				line-height: 134rpx;
			}

			.right {
				font-size: 24rpx;
				line-height: 134rpx;
				position: absolute;
				right: 35rpx;
			}
		}

		.fitem {
			background: url(../../static/fel/yhqt.png);
			background-size: cover;
		}

	}

	.btn {
		height: 98rpx;
		background-color: #666666;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 98rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.lqactive {
		background-color: #FF392B;
	}
</style>
